import * as Yup from 'yup'
import { useFormik } from 'formik'

function App() {
  const formik = useFormik({
    initialValues: { username: '', password: '' },
    validationSchema: Yup.object({
      username: Yup.string().max(5, '用户名过长').required('请输入用户名'),
      password: Yup.string().max(10, '密码过长').required('请输入密码')
    }),
    onSubmit: values => {
      console.log(values)
    }
  })

  return (
    <form onSubmit={formik.handleSubmit}>
      <p>
        <input
          type="text"
          name="username"
          {...formik.getFieldProps('username')}
        ></input>
        {formik.touched.username && formik.errors.username ? formik.errors.username : ''}
      </p>
      <p>
        <input
          type="password"
          name="password"
          {...formik.getFieldProps('password')}
        ></input>
        {formik.touched.password && formik.errors.password ? formik.errors.password : ''}
      </p>
      <input type="submit"></input>
    </form>
  )
}

export default App
